<template>
	<gui-page style="background-color: #F4F4F4;" :customHeader="true" :headerClass="['gui-bg-white']" ref="guiPage" :fullPage="true">
		<!-- 自定义头部导航 -->
		<template v-slot:gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<gui-header-leading :home="false" :back="true"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<view style="width:44rpx;"></view>
				<text class="gui-flex1 gui-text-center gui-ellipsis">验证码</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:120rpx;"></view>
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</template>
		<!-- 页面主体 -->
		<template v-slot:gBody>
			<view class="wrap">
				<view class="top"></view>
				<view class="key-input">
					<view class="title">输入验证码</view>
					<view class="tips">验证码已发送至 +{{mobile}}</view>
					<up-message-input :focus="true" :value="value" @change="change" @finish="finish" mode="bottomLine"
						:maxlength="maxlength"></up-message-input>
					<text :class="{ error: error }">验证码错误，请重新输入</text>
					<view class="captcha">
						<text :class="{ noCaptcha: show }" @tap="noCaptcha">收不到验证码点这里</text>
						<text :class="{ regain: !show }">{{ second }}秒后重新获取验证码</text>
					</view>
					<view class="">
						缓存：{{mockCode}}
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>
<script>
	import useUser from "@/api/user"
	const {mobileLogin} = useUser()
	export default {
		data() {
			return {
				maxlength: 4,
				value: '',
				second: 60,
				show: false,
				error: false,
				mobile:"",
				mockCode:""
			};
		},
		computed: {},
		onLoad(options) {
			this.mobile= options.mobile
			// this.getCaptcha()
			let interval = setInterval(() => {
				this.second--;
				if (this.second <= 0) {
					this.show = true;
					if (this.value.lenth != 4) {
						this.error = true;
					}
					clearInterval(interval);
				}
			}, 1000);
			const code = uni.getStorageSync("code")
			this.mockCode=code
		},
		methods: {
			// 收不到验证码选择时的选择
			noCaptcha() {
				uni.showActionSheet({
					itemList: ['重新获取验证码', '接听语音验证码'],
					success: function(res) {

					},
					fail: function(res) {

					}
				});
			},
			// change事件侦听
			change(value) {
				// console.log('change', value);
			},
			// 输入完验证码最后一位执行
			async finish(value) {
				// console.log('finish', value);
				const {data} =  await mobileLogin({
					mobile:this.mobile,
					code:this.mockCode
				})
				let roles = data.user.roles
				let user = JSON.stringify(data.user)
				uni.setStorageSync("token",data.token)
				uni.setStorageSync("user",user)
				uni.setStorageSync("roles",JSON.stringify(roles))
				
				uni.switchTab({
					url: `/pages/index/index`
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.top{
		height:300rpx;
	}
	.wrap {
		padding: 80rpx;
	}

	.box {
		margin: 30rpx 0;
		font-size: 30rpx;
		color: 555;
	}

	.key-input {
		padding: 30rpx 0;

		text {
			display: none;
		}

		.error {
			display: block;
			color: red;
			font-size: 30rpx;
			margin: 20rpx 0;
		}
	}

	.title {
		font-size: 50rpx;
		color: #333;
	}

	.key-input .tips {
		font-size: 30rpx;
		color: #333;
		margin-top: 20rpx;
		margin-bottom: 60rpx;
	}

	.captcha {
		color: $u-warning;
		font-size: 30rpx;
		margin-top: 40rpx;

		.noCaptcha {
			display: block;
		}

		.regain {
			display: block;
		}
	}
</style>